<template>
    <div class="chat-input">
      <div class="input-container" ref="inputContainerRef">
        <button class="emoji-button" @click.stop="toggleEmojiPicker">
          😊
        </button>
        <input
          v-model="inputContent"
          @keyup.enter="sendMessage"
          type="text"
          placeholder="输入消息..."
        >
        <button 
          class="send-button" 
          @click="sendMessage" 
          :disabled="!inputContent.trim()"
        >
          发送
        </button>
      </div>
      <EmojiPicker 
        v-if="showEmojiPicker"
        @select-emoji="insertEmoji"
      />
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted, onUnmounted } from 'vue'
  import EmojiPicker from './EmojiPicker.vue'
  
  const emit = defineEmits(['send-message'])
  const inputContent = ref('')
  const showEmojiPicker = ref(false)
  const inputContainerRef = ref(null)
  
  const sendMessage = () => {
    if (inputContent.value.trim()) {
      emit('send-message', inputContent.value)
      inputContent.value = ''
    }
  }
  
  const toggleEmojiPicker = () => {
    showEmojiPicker.value = !showEmojiPicker.value
  }
  
  const insertEmoji = (emoji) => {
    inputContent.value += emoji
  }
  
  // 处理点击外部关闭表情选择器
  const handleClickOutside = (event) => {
    if (inputContainerRef.value && !inputContainerRef.value.contains(event.target)) {
      showEmojiPicker.value = false
    }
  }
  
  onMounted(() => {
    document.addEventListener('click', handleClickOutside)
  })
  
  onUnmounted(() => {
    document.removeEventListener('click', handleClickOutside)
  })
  </script>
  
  <style scoped>
  .chat-input {
    padding: 10px;
    background-color: white;
    border-top: 1px solid #eee;
    position: relative;
  }
  
  .input-container {
    display: flex;
    gap: 10px;
  }
  
  input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    outline: none;
  }
  
  input:focus {
    border-color: #07c160;
  }
  
  .emoji-button {
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2em;
    border-radius: 4px;
  }
  
  .emoji-button:hover {
    background-color: #f0f0f0;
  }
  
  .send-button {
    padding: 8px 16px;
    background-color: #07c160;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  
  .send-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
  
  .send-button:not(:disabled):hover {
    background-color: #06ae56;
  }
  </style>